import React, {useEffect, useState} from 'react';
import '../../App.css';
import WallpaperSector from './WallpaperSector';
import { WallpaperEntity } from "../../components/WallpaperObject";
import {fetchData} from "../../apis/api";
import {Button, Flex, Image, Spin} from "antd";
import {useParams} from "react-router-dom";
import NavbarDetail from "./NavbarDetail";
import {
    PictureOutlined, TagsOutlined, HeartOutlined, StarOutlined, ProfileOutlined,
    DeploymentUnitOutlined, PlusOutlined, ShareAltOutlined
} from "@ant-design/icons";

export type WallpaperListType = {
    "currentPage": number
    "totalPage": number
    "offset": number
    "total": number
    "list": WallpaperEntity[]
}

function isVideo(path: string): boolean {
    const ext = path.split('.').pop();
    return ext === 'mp4';
}
function Page() {

    const { wallpaperId } = useParams<{ wallpaperId: string }>();

    const [wallpaperResponse, setWallpaper] = useState<WallpaperListType | null>(null);
    const [wallpaper, setThisWallpaper] = useState<WallpaperEntity | null>(null);

    const [error, setError] = useState<string | null>(null);
    const [loading, setLoading] = useState<boolean>(true);

    const getThisWallpaper = async (wallpaperId:string|undefined) =>{
        if (wallpaperId === undefined){
            return;
        }
        try {
            setLoading(true);
            const wallpaperRequest = await fetchData('/wallpaper/search/get-by-id?id=' + encodeURIComponent(wallpaperId));
            setThisWallpaper(wallpaperRequest);
        } catch (error) {
            setError("获取壁纸数据失败");
        } finally {
            setLoading(false);
        }
    }

    useEffect(() => {
        // wallpaperId 改变的时候，更新wallpaper数据
        getThisWallpaper(wallpaperId);
    }, [wallpaperId]);


    const getWallpaper = async () => {
        try {
            const wallpaperRequest = await fetchData('/wallpaper/search/list?offset=6&page=1');
            setWallpaper(wallpaperRequest);
        } catch (error) {
            setError("获取壁纸数据失败");
        }
    };

    useEffect(() => {
        // 初始化加载的时候获取壁纸
        getWallpaper();
    }, []);

    const handleApply = () => {

    }
    const handleLike = () => {

    }
    const handleShare = () => {

    }
    const handleSubscribe = () => {

    }

    if (error) {
        return <div>{error}</div>;
    }

    if (!wallpaper || !wallpaperResponse || loading){
        return <div className="App">
            <NavbarDetail/>
            <div className="loading">
                <Spin size="large">
                </Spin>
            </div>
        </div>
    }
  return (
    <div className="App">
        <NavbarDetail/>

        <Flex align={"center"}>
            {
                // 动态壁纸
                isVideo(wallpaper.path) &&
                <video
                    autoPlay
                    muted
                    loop
                    src={wallpaper.path}
                    style={{borderRadius:"8px",
                        width: '60vw',
                        maxWidth : '900px',
                        maxHeight : '700px',
                        boxShadow: '0 0 4px 10px'
                    }}
                    className={"wallpaperDetailDisplay"}

                />

            }
            {
                // 静态壁纸
                !isVideo(wallpaper.path) &&

                <img
                    style={{borderRadius:"8px",
                        width: '60vw',
                        maxWidth : '900px',
                        maxHeight : '700px',
                        boxShadow: '0 0 4px 10px'
                    }}
                    alt={wallpaper.name}
                    src={wallpaper.path}
                    className={"wallpaperDetailDisplay"}
                >

                </img>
            }

            <div style={{border: "2px solid gray",
                borderRadius: "8px",
                width: "100%",
                maxHeight: "400px",
                padding: "10px",
                boxShadow: "3px 3px 10px gray",
                overflowY: "auto",
                fontFamily: "KaiTi"}}
                 className={"wallpaperDetailSection"}>

                <span style={{
                    fontSize: "28px",
                    textShadow: "2px 2px 5px gray"
                }}>
                    <PictureOutlined /> {wallpaper.name}
                </span>
                <br></br>
                <br></br>
                <div style={{
                    maxWidth:"300px",
                    margin:"auto auto",
                }} className={"wallpaperDetail"}>
                    <ProfileOutlined /> {wallpaper.description}
                    <br></br>
                    <br></br>
                    <TagsOutlined /> {wallpaper.tag}
                    <br></br>
                    <br></br>
                    <HeartOutlined />： {wallpaper.likes}   <StarOutlined />： {wallpaper.subscribes}

                    <br></br>
                </div>

                <div style={{textAlign:"center"}}>
                    <Button onClick={handleApply}
                        type={"primary"}
                        className={"wallpaperDetailButton wallpaperApplyButton"}
                        data-id={wallpaper.id}>
                        <PlusOutlined /> 应用
                    </Button>
                    <Button onClick={handleLike}
                            className={"wallpaperDetailButton"}
                        >
                        <HeartOutlined /> 喜欢
                    </Button>
                    <Button onClick={handleSubscribe}
                            className={"wallpaperDetailButton"}>
                        <StarOutlined /> 收藏
                    </Button>
                    <Button onClick={handleShare}
                            className={"wallpaperDetailButton"}>
                        <ShareAltOutlined /> 分享
                    </Button>
                </div>

            </div>
        </Flex>

        <div style={{maxWidth:"1000px",
            margin: "auto auto"}}>

            <span
                style={{
                    fontSize:"28px",
                    textAlign:"left",
                    display:"inline-block",
                    width:"100%",
                    marginTop:"40px",
                    marginBottom:"20px"
                }}>
                <DeploymentUnitOutlined /> 同类壁纸
            </span>

        </div>
        <div className="content">
            <WallpaperSector wallpapers={wallpaperResponse}/>
        </div>
    </div>
  );
}

export default Page;
